<template>
  <div style="height:100%">
    <div class="adapt">
      <div class="wapper">
        <div v-for="(item,index) in skuList" :key="index" class="cartadapt">
          <van-swipe-cell class="swipeCell">
            <div class="leftCount">
              <input type="checkbox" v-model="getGoodsSelected[item.id]"
              class="checkbox" @change="selectedChange(item.id,getGoodsSelected[item.id])"/>
              <van-card class="cartinfo" :desc="item.description" :title="item.title" :thumb="item.img">
                <template #tags>
                  <van-tag class="cartinfo-tag" plain v-for="(item2,index2) in item.specs" :key="index2">{{item2.value}}</van-tag>
                </template>
                <template #bottom>
                  <div class="cart-price">￥{{item.price}}</div>
                  <van-stepper v-model="getGoodsCount[item.id]" @change="countChanged(item.id,getGoodsCount[item.id])" class="cart-stepper"/>
                </template>
              </van-card>
            </div>
            <template #right>
              <van-button @click="removeCarItem(item.id)" square text="删除" type="danger" class="delete-button"/>
            </template>
          </van-swipe-cell>
        </div>
      </div>
      <div class="account">
        <van-button class="pay" @click="settlementClick()">结算</van-button>
        <div>
          <div class="cart-choice">
            已选:<span class="highlight">{{getSelectedCount}}</span>件
          </div>
          <div class="cart-sum">
            合计:<span class="highlight">￥{{getSelectedAmount}}</span>
          </div>
        </div>
      </div>
    </div>
      <navBar></navBar>
  </div>
</template>

<script>
import{mapMutations,mapGetters,mapState}from 'vuex'
export default {
  props: {
  },
  components: {

  },
  data() {
    return {
      goodsList:[],
      skuList:[],
    };
  },
  computed: {
    ...mapState(['car']),
    ...mapGetters(['getGoodsCount',
                  'getGoodsSelected',
                  'getSelectedCount',
                  'getSelectedGoods']),
    ...mapMutations(['addOrder']),
    getSelectedAmount(){
      var goods=this.getSelectedGoods
      var amount=0
      this.skuList.forEach((item)=>{
        if(goods[item.id])
          amount+=item.price*goods[item.id].buyAmount
      })
      return amount.toFixed(2)
    }
  },
  watch: {
  },
  created() {
    this.getSkuDetail()
  },
  methods: {
    settlementClick(){
      var goods=this.getSelectedGoods
      this.skuList.forEach((item)=>{
        if(item.id==goods[item.id].skuId)
          item.buyAmount=goods[item.id].buyAmount
      })
      this.$store.commit('addOrder',this.skuList)
      this.$router.push({
        name:'buy',
        params:{
          buyMode:1
        }
      })
    },
    countChanged(id,count){
      this.$store.commit('updateGoodsInfo',{
        id:id,
        buyAmount:count 
      })
    },
    removeCarItem(id){
      this.$store.commit('removeCar',id)
      this.getSkuDetail()
    },
    getSkuDetail(){
      let list=this.car.map(item=>item.skuId)
      console.log('list',list)
      let params={
        ids:list.join()
      }
      this.$http.get('/api/spu/sku',{
        params:params
      }).then(
        response=>{
          console.log('shopCart',response.data)
          this.skuList=response.data
        },error=>{
          console.log('shopCart',error.msg)
        }
      )
    },
    selectedChange(id,val){
      this.$store.commit('updateGoodsSelected',{
        id:id,
        selected:val
      })
    }
  },
};
</script>
<style scoped lang="less">
.adapt{
  overflow: hidden;
  zoom: 1;
}
.wapper{
  overflow-y: auto;
  height: calc(100vh - 50px - 50px - 46px);
}
.checkbox{
  float: left;
  height: 120px;
  margin: 0 10px;
}
.account{
  position: fixed;
  bottom: 50px;
  height: 50px;
  width: 100%;
  background: rgb(240, 237, 237);
}
.cart-choice{
  float: left;
  line-height: 50px;
  padding-top: 20px;
}
.car-sum{
  float: right;
  line-height: 50px;
  padding-right: 10px;
}
.pay{
  float: right;
  height: 40px;
  width: 100px;
  color:white;
  background: rgb(105,134,140);
  margin-top: 5px;
  margin-right: 5px;
  border-radius: 8px;
  border: none;
}
.delete-button{
  height: 100%;
}
.leftCont{
  border-bottom: 1px solid #eee;
  display: flex;
  height: 100%;
}
.highlight{
  color: rgb(207, 175, 116);
  padding-right: 5px;
}
.cart{
  text-align: left;
  width: 100%;
  .cart-price{
    float: left;
    font-size: 18px;
    line-height: 30px;
  }
  .cart-stepper{
    float: right;
  }
}
.cartinfo{
  flex: 1;
  float: left;
  font-size: 13px;
  margin: 0;
  background-color: #fff;
  .cartinfo-tag{
    margin: 10px 0;
    margin-right: 5px;
  }
}
</style>